<template>
  <view class="container">
    <!-- 自定义头部 -->
    <BhTitle titleText="发布店铺" :custom-click-back="1" @clickBack="clickBack"></BhTitle>

    <view class="title">请认真完善以下发布店铺所需的资料</view>
    <view class="sub-title">为了能顺利通过，请上传真实有效的信息</view>
    <view class="info-wrap bh-row bh-justify-space-between">
      <view class="info-title-wrap bh-col bh-justify-center bh-align-start">
        <view class="info-title">基本信息</view>
        <view class="info-sub-title">您店铺的基本信息每个找店人都会关注哦</view>
      </view>
      <view :class="['info-btn', finished('base') == 1 ? 'info-btn-ac' : '']" @click="() => { navToPage('/PostPage/post_add_sell/post_add_sell_base') }">
        {{ finished('base') == 1 ? '修改' : '填写' }}
      </view>
    </view>
    <view class="info-wrap bh-row bh-justify-space-between">
      <view class="info-title-wrap bh-col bh-justify-center bh-align-start">
        <view class="info-title">商铺照片</view>
        <view class="info-sub-title">有照片的店铺比没有的关注度高10倍哦</view>
      </view>
      <view :class="['info-btn', finished('pic') == 1 ? 'info-btn-ac' : '']" @click="() => { navToPage('/PostPage/post_add_sell/post_add_sell_pic') }">
        {{ finished('pic') == 1 ? '重新上传' : '上传' }}
      </view>
    </view>
    <view class="other-wrap">
      <view class="other-title">加分项</view>
      <view class="other-item-wrap bh-row bh-justify-space-between">
        <!-- <view class="other-item-img">图片</view> -->
        <image src="../images/post_add/post_add_license.svg" mode="scaleToFill" class="other-item-img" />
        <view class="other-item-title">商铺证照</view>
        <!-- <view class="other-item-btn">添加</view> -->
        <image v-if="finished('license') == 1" src="../images/post_add/checked1.png" mode="scaleToFill" class="other-item-btn" @click="() => { navToPage('/PostPage/post_add_sell/post_add_sell_license') }" />
        <image v-else src="../images/post_add/post_add_addbtn.svg" mode="scaleToFill" class="other-item-btn" @click="() => { navToPage('/PostPage/post_add_sell/post_add_sell_license') }" />
      </view>

      <view class="other-item-wrap bh-row bh-justify-space-between">
        <!-- <view class="other-item-img">图片</view> -->
        <image src="../images/post_add/post_add_vedio.svg" mode="scaleToFill" class="other-item-img" />
        <view class="other-item-title">商铺视频</view>
        <image v-if="finished('video') == 1" src="../images/post_add/checked1.png" mode="scaleToFill" class="other-item-btn" @click="() => { navToPage('/PostPage/post_add_sell/post_add_sell_video') }" />
        <image v-else src="../images/post_add/post_add_addbtn.svg" mode="scaleToFill" class="other-item-btn" @click="() => { navToPage('/PostPage/post_add_sell/post_add_sell_video') }" />
      </view>

      <view class="other-item-wrap bh-row bh-justify-space-between">
        <image src="../images/post_add/post_add_chat.svg" mode="scaleToFill" class="other-item-img" />
        <view class="other-item-title">点评商铺</view>
        <image v-if="finished('feature') == 1" src="../images/post_add/checked1.png" mode="scaleToFill" class="other-item-btn" @click="() => { navToPage('/PostPage/post_add_sell/post_add_sell_feature') }" />
        <image v-else src="../images/post_add/post_add_addbtn.svg" mode="scaleToFill" class="other-item-btn" @click="() => { navToPage('/PostPage/post_add_sell/post_add_sell_feature') }" />
      </view>
    </view>
    <view :class="[finished('base') == 1 && finished('pic') == 1 ? 'publish-btn' : 'publish-btn publish-btn-inac']" @click="postAdd">
      发布我的店铺
    </view>
    <showCustomTips></showCustomTips>
    <ShowCustomModal></ShowCustomModal>
  </view>
</template>

<script>
import { Api } from '../../api/api'
import { BackendApi } from '../../api/backend_api'
import check_utils from '../../components/custom_views/check_utils'
import { CustomTips } from '../../components/custom_views/custom_tips'
import ShowCustomModal from '../../components/custom_views/show-custom-modal.vue'
import showCustomTips from '../../components/custom_views/show-custom-tips.vue'
import { post_add_mixin } from './post_add_mixin'
export default {
  components: { showCustomTips, ShowCustomModal },
  mixins: [post_add_mixin],
  data() {
    let that = this
    return {
      ...post_add_mixin.initData(that),
      source: ''
    }
  },
  computed: {},
  methods: {
    clickBack() {
      let that = this
      this.showCustomModal({
        content: '您还未发布哦～',
        confirmText: '继续发布',
        cancelText: '坚持离开',
        success(res) {
          if (res.confirm) {
            that.hideCustomModal()
          } else {
            if (that.postDto.facadePicture + that.postDto.shopVideo) {
              BackendApi.v05_tencentCos_delImage({
                fileUrl: that.postDto.facadePicture + that.postDto.shopVideo
              }, false).then(res => {
                console.log('删除图片返回', res)
              })
            }
            that.$store.commit('updateMyPostOfEditingSell', {})

            if (that.source == 'share') {
              uni.redirectTo({
                url: '/pages/home/home'
              })
            } else {
              uni.navigateBack()
            }
            // uni.navigateBack()
          }
        }
      })

    },
    initData(options) {
      let that = this
      if (options.postId) {
        // 编辑状态设置到缓存中。
        Api.PostApi.detail(options.postId, (res) => {
          if (res.code == 200) {
            res.data.sourceId = options.postId
            res.data.id = null
            that.$store.commit('updateMyPostOfEditingSell', res.data)
            that.postDto = res.data
          }
        })
      } else {
        this.postDto = post_add_mixin.initData(that).postDto

        // 发布数量最多10个。
        // if (this.$store.state.sessionDto.postNumber >= 10) {
        if (false) {
          this.showCustomTips({
            title: '温馨提示',
            content: CustomTips.tipsPostAddReachMaxCount(10),
            confirmText: '确定',
            confirmColor: '',
            cancelText: '',
            success(res) {
              if (res.confirm) {
                uni.redirectTo({
                  url: '/pages/home/home'
                })
              }
            }
          })
        } else {
          Api.PostSellApi.postOfInit(that, (res) => {
            if (res.code == 200) {
              if (res.data.records && res.data.records.length > 0) {
                that.showCustomTips({
                  title: '温馨提示',
                  content: CustomTips.tipsBeforeAuditFinish,
                  confirmText: '确定',
                  confirmColor: '',
                  cancelText: '',
                  success(res) {
                    if (res.confirm) {
                      uni.redirectTo({
                        url: '/pages/home/home'
                      })
                    }
                  }
                })
              }
            } else {
              check_utils.showCustToast(res.msg)
              uni.redirectTo({
                url: '/pages/home/home'
              })
            }
          })
        }

      }
    }
  },
  watch: {},

  // 分享给微信好友
  onShareAppMessage(res) {

    return {
      title: '发布店铺',
      imageUrl: '/static/images/newlogo.png',
      path: '/PostPage/post_add_sell/post_add_sell?source=share',
    }
  },
  onShareTimeline(res) {
    return {
      title: '发布店铺',
      imageUrl: '/static/images/newlogo.png',
      path: '/PostPage/post_add_sell/post_add_sell?source=share',
    }
  },

  // 页面周期函数--监听页面加载
  onLoad(options) {
    let that = this
    that.source = options.source
    if (options.source == 'share') {
      // 从分享而来
      Api.LoginApi.login(that, (res) => {
        uni.setStorageSync('firstLogin', 0)
        that.fromMessagePage = options.fromMessagePage == 'true' ? true : false
        let capsule = uni.getMenuButtonBoundingClientRect()
        that.capsuleTop = capsule.top
        console.log(capsule)
        that.capsuleHeight = capsule.height
        that.titleHeight = capsule.height + 10 + capsule.top
        if (res.code == 200) {
          that.initData(options)
        }
      })
    } else {
      that.initData(options)
    }
    // if (options.postId) {
    //   // 编辑状态设置到缓存中。
    //   Api.PostApi.detail(options.postId, (res) => {
    //     if (res.code == 200) {
    //       res.data.sourceId = options.postId
    //       res.data.id = null
    //       that.$store.commit('updateMyPostOfEditingSell', res.data)
    //       that.postDto = res.data
    //     }
    //   })
    // } else {
    //   this.postDto = post_add_mixin.initData(that).postDto

    //   // 发布数量最多10个。
    //   if (this.$store.state.sessionDto.postNumber >= 10) {
    //     this.showCustomTips({
    //       title: '温馨提示',
    //       content: CustomTips.tipsPostAddReachMaxCount(10),
    //       confirmText: '确定',
    //       confirmColor: '',
    //       cancelText: '',
    //       success(res) {
    //         if (res.confirm) {
    //           uni.redirectTo({
    //             url: '/pages/home/home'
    //           })
    //         }
    //       }
    //     })
    //   } else {
    //     Api.PostSellApi.postOfInit(that, (res) => {
    //       if (res.code == 200) {
    //         if (res.data.records && res.data.records.length > 0) {
    //           this.showCustomTips({
    //             title: '温馨提示',
    //             content: CustomTips.tipsBeforeAuditFinish,
    //             confirmText: '确定',
    //             confirmColor: '',
    //             cancelText: '',
    //             success(res) {
    //               if (res.confirm) {
    //                 uni.redirectTo({
    //                   url: '/pages/home/home'
    //                 })
    //               }
    //             }
    //           })
    //         }
    //       } else {
    //         check_utils.showCustToast(res.msg)
    //         uni.redirectTo({
    //           url: '/pages/home/home'
    //         })
    //       }
    //     })
    //   }

    // }

  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() { },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {
    let that = this
    if (that.$store.state.myPostOfEditingSell && that.$store.state.myPostOfEditingSell.sourceId) {
      that.postDto = that.$store.state.myPostOfEditingSell
    } else {
      this.postDto = post_add_mixin.initData(that).postDto
    }

  },
  // 页面周期函数--监听页面隐藏
  onHide() { },
  // 页面周期函数--监听页面卸载
  onUnload() { },
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);

page {
  height: 100vh;
}

.container {
  background-color: #F5F9FA;
  width: 100%;
  height: 100vh;
}

.title {
  padding-left: 48rpx;
  padding-top: 32rpx;

  font-size: 32rpx;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}

.sub-title {
  margin-left: 48rpx;
  margin-top: 24rpx;

  font-size: 24rpx;
  font-weight: normal;

  color: #999999;
}

.info-wrap {
  margin-left: 32rpx;
  margin-right: 32rpx;
  margin-top: 32rpx;
  // width: 343px;
  // height: 160rpx;
  border-radius: 16rpx;
  background: #FFFFFF;
  box-sizing: border-box;
  border: 1rpx solid rgba(0, 0, 0, 0.85);

  .info-title-wrap {
    .info-title {
      margin-left: 32rpx;
      margin-top: 32rpx;
      // width: 71px;
      // height: 18px;
      // opacity: 1;

      // font-family: Alibaba PuHuiTi 2.0;
      font-size: 36rpx;
      font-weight: 600;
      text-align: center;

      color: rgba(0, 0, 0, 0.85);
    }

    .info-sub-title {
      margin-left: 32rpx;
      margin-top: 24rpx;
      margin-bottom: 44rpx;

      font-size: 24rpx;
      font-weight: normal;

      color: #9E9E9E;
    }
  }

  .info-btn {
    margin-right: 32rpx;
    padding: 16rpx 36rpx;
    // top: 188px;
    // width: 64px;
    // height: 24px;
    border-radius: 200rpx;

    background: #F8D247;
    background: #eee;

    font-size: 28rpx;
    font-weight: 600;

    color: rgba(0, 0, 0, 0.85);
  }

  .info-btn-ac {
    background: #F8D247;
  }
}

.other-wrap {
  margin-left: 32rpx;
  margin-right: 32rpx;
  margin-top: 48rpx;
  // width: 343px;
  // height: 334px;
  border-radius: 16rpx;

  background: linear-gradient(180deg, #F8D247 -27%, #FFFFFF 84%);

  .other-title {
    padding-top: 28rpx;
    padding-left: 20rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }

  .other-item-wrap {
    margin-left: 20rpx;
    margin-right: 20rpx;
    margin-top: 36rpx;
    // top: 406px;
    // width: 323px;
    height: 160rpx;
    border-radius: 16rpx;

    background: #FFFFFF;

    .other-item-img {
      margin-left: 48rpx;
      width: 40rpx;
      height: 40rpx;
      opacity: 1;
    }

    .other-item-title {
      margin-left: 32rpx;
      flex: 1;
      font-size: 36rpx;
      font-weight: 600;

      color: rgba(0, 0, 0, 0.85);
    }

    .other-item-btn {
      width: 38rpx;
      height: 38rpx;
      margin-right: 64rpx;
    }
  }
}

.publish-btn {
  margin-top: 28rpx;
  width: 612rpx;
  // height: 112rpx;
  border-radius: 48px;

  background: #F8D247;
  margin: auto;
  margin-top: 28rpx;
  text-align: center;
  align-items: center;
  padding-top: 42rpx;
  padding-bottom: 42rpx;

  font-size: 32rpx;
  font-weight: 600;

  color: rgba(0, 0, 0, 0.85);
}

.publish-btn-inac {
  background: #ddd;
}
</style>